import React, { Component } from 'react'
import {Cproduct} from "../../../types/product"
import {connect} from "react-redux"
import CartProduct from "../../../components/CartProduct"
interface IProps{
    cartList:Cproduct[],
    del:(isDel:boolean) => void
}
interface IState{
    isShow:boolean
}
class Cart extends Component<IProps,IState> {
    state={
        isShow:false
    }
    render() {
        let {cartList} =  this.props;
        let {isShow} = this.state
        return (
            <div className="cart-page wrap">
                <div>
                {
                    cartList.length && cartList.map((item:Cproduct)=><CartProduct open={()=>this.open()} key={item.id} item={item}></CartProduct>)
                }
                </div>
                <div className="confirm" style={{display:isShow ? 'block':"none"}}>
                    <h3>你确定删除吗？</h3>
                    <div>
                        <button onClick={this.close}>取消</button>
                        <button onClick={this.cur}>确定</button>
                    </div>
                </div>
            </div>
        )
    }
    //关闭弹窗
    close = () => {
        this.setState({
            isShow:false
        })
    }

    open = () => {
        this.setState({
            isShow:true
        })
    }
    cur=()=>{
        this.props.del(true);
        //关闭
        this.close();
    }
}
let stateMapToProps=(state:any)=>{
    console.log(state)
    return{
        cartList:state.list.cartList
    }
}
let dispatchMapToProps=(dispatch:any)=>{
    return{
        del(isDel:boolean){
            dispatch({type:"DEL_TARGET",isDel})
        }
    }
}
export default connect(stateMapToProps,dispatchMapToProps)(Cart)
